﻿@page "/components/progress"
@page "/components/progressbar"
@page "/components/progressindicator"
@page "/components/progress-indicator"

<PageOutlet Url="components/progress"
            Title="Progress"
            Description="progress component of the bit BlazorUI components" />

<DemoPage Name="Progress"
          SecondaryNames="@(["ProgressIndicator", "ProgressBar"])"
          Description="BitProgress is used to show the completion status of an operation."
          SubClasses="componentSubClasses"
          Parameters="componentParameters"
          GitHubUrl="Progress/Progress/BitProgress.razor"
          GitHubDemoUrl="Progress/Progress/BitProgressDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <BitProgress Label="Basic Progress"
                     Description="Example description"
                     Percent="42" />
    </DemoExample>

    <DemoExample Title="Circular" RazorCode="@example2RazorCode" Id="example2">
        <BitProgress Circular
                     Label="Basic Circular Progress"
                     Description="Example description"
                     Percent="42" />
    </DemoExample>

    <DemoExample Title="ShowPercentNumber" RazorCode="@example3RazorCode" Id="example3">
        <BitProgress Label="Show Percent Number"
                     Percent="85.69"
                     ShowPercentNumber />
        <br />
        <BitProgress Label="Percent Number Format"
                     Percent="85.69"
                     PercentNumberFormat="{0:F2} %"
                     ShowPercentNumber />
        <br /><br />
        <BitProgress Circular
                     Label="Show Percent Number"
                     Percent="85.69"
                     ShowPercentNumber />
        <br />
        <BitProgress Circular
                     Label="Percent Number Format"
                     Percent="85.69"
                     PercentNumberFormat="{0:F2} %"
                     ShowPercentNumber />
    </DemoExample>

    <DemoExample Title="Thickness" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
        <BitSlider @bind-Value="barThickness" Max="50" />
        <br /><br />
        <BitProgress ShowPercentNumber Percent="69" Thickness="(int)barThickness" />
        <br />
        <BitProgress Circular ShowPercentNumber Percent="69" Thickness="(int)barThickness" />
    </DemoExample>

    <DemoExample Title="Indeterminate" RazorCode="@example5RazorCode" Id="example5">
        <BitProgress Indeterminate />
        <br />
        <BitProgress Circular Indeterminate />
    </DemoExample>

    <DemoExample Title="Color" RazorCode="@example6RazorCode" Id="example6">
        <BitProgress Color="#c10606" Percent="69" />
        <br />
        <BitProgress Color="#ffba17" Indeterminate />
        <br /><br />
        <BitProgress Color="#c10606" Circular Percent="69" />
        <br />
        <BitProgress Color="#ffba17" Circular Indeterminate />
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example7RazorCode" Id="example7">
        <div>
            <div>Component's Style & Class:</div>
            <br />
            <BitProgress Indeterminate Style="background-color: #e687dc; border-radius: 0.5rem; padding: 0.2rem;" Thickness="10" />
            <br />
            <BitProgress Class="custom-class"
                         Percent="69"
                         Thickness="10" />
            <br /><br />
            <BitProgress Circular Indeterminate Style="background-color: #e687dc; border-radius: 0.5rem; padding: 0.2rem;" Thickness="10" />
            <br />
            <BitProgress Circular
                         Class="custom-class"
                         Percent="69"
                         Thickness="10" />
            <br /><br /><br />
            <div>Styles & Classes:</div>
            <br />
            <BitProgress Indeterminate
                         Thickness="10"
                         Styles="@(new() { Bar = "background: linear-gradient(to right, green 0%, yellow 50%, green 100%);",
                                           Track = "background-color: green;" })" />
            <br />
            <BitProgress Classes="@(new() { Bar = "custom-bar",
                                            Track = "custom-tracker"})"
                         Percent="69"
                         Thickness="10" />
            <br /><br />
            <BitProgress Circular Indeterminate
                         Thickness="10"
                         Styles="@(new() { Bar = "stroke: greenyellow;",
                                           Track = "stroke: green;" })" />
            <br />
            <BitProgress Circular
                         Percent="69"
                         Thickness="10"
                         Classes="@(new() { Bar = "custom-circle-bar",
                                            Track = "custom-circle-tracker"})" />
        </div>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example8RazorCode" Id="example8">
        <BitProgress Dir="BitDir.Rtl"
                     Thickness="10"
                     Indeterminate />
        <br />
        <BitProgress Label="لیبل تست"
                     Description="توضیحات تست"
                     Dir="BitDir.Rtl"
                     Percent="69"
                     Thickness="10"
                     ShowPercentNumber />
        <br /><br />
        <BitProgress Circular
                     Dir="BitDir.Rtl"
                     Thickness="10"
                     Indeterminate />
        <br />
        <BitProgress Circular
                     Label="لیبل تست"
                     Description="توضیحات تست"
                     Dir="BitDir.Rtl"
                     Percent="69"
                     Thickness="10"
                     ShowPercentNumber />
    </DemoExample>
</DemoPage>
